<template>
  <div class="userListCard">
    <div
      class="userListCardItem"
      v-for="(item, index) in musicFollowedList"
      :key="index"
    >
      <div class="userListCard_left">
        <img :src="musicFollowedList[index].avatarUrl" alt="" />
      </div>
      <div class="userListCard_right">
        <div class="nickName">{{ musicFollowedList[index].nickname }}</div>
        <div class="content">{{ musicFollowedList[index].signature }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserListCard",
  props: {
    musicFollowedList: {
      type: Array,
      default: [],
    },
  },
};
</script>

<style lang="less" scoped>
.userListCard {
  display: flex;
  flex-wrap: wrap;
}
.userListCardItem {
  width: 30%;
  display: flex;
  padding: 10px 10px;
  border-radius: 10px;
  margin-left: 10px;
}
.userListCardItem:hover {
  background-color: #f9f9f9;
  cursor: pointer;
}
.userListCard_left {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
}
.userListCard_right {
  margin-left: 20px;
}
.nickName {
  margin: 10px 0 5px;
  font-size: 15px;
  color: #373737;
}
.content {
  font-weight: lighter;
  font-size: 13px;
  transform: scale(0.9) translateX(-5%);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 250px;
  height: 20px;
  margin: 5px 0;
}
</style>